<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="1080px"
    @close="close"
  >
    <div>
      <el-input
        v-model.trim="blood_id"
        class="wd300 mr12"
        clearable
        placeholder="血袋号"
        @input="getOne"
      >
        <template slot="prepend">血袋号：</template>
      </el-input>
      <el-button type="primary" @click="getOne">搜索</el-button>
      <div class="h12"></div>
    </div>
    <el-empty
      v-if="!form.id"
      description="暂无任何数据"
      style="padding-top: 200px"
    />
    <div v-else>
      <fieldset>
        <legend>血液修改</legend>
        <el-form
          ref="form"
          label-suffix="："
          label-width="128px"
          :model="form"
          :rules="rules"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="原始血袋号" prop="id_out">
                <el-input
                  v-model.trim="form.id_out"
                  clearable
                  placeholder="原始血袋号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="血液成分" prop="product_id_path">
                <el-cascader
                  v-model="form.product_id_path"
                  class="wd200"
                  clearable
                  filterable
                  :options="products"
                  :props="props"
                  :show-all-levels="false"
                  size="mini"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="血型" prop="abo">
                <el-select
                  v-model="form.abo"
                  class="wd200"
                  clearable
                  filterable
                  placeholder="血型"
                  size="mini"
                >
                  <el-option
                    v-for="(item, index) in bloodGroups"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="Rh(D)" prop="rhd">
                <el-select
                  v-model="form.rhd"
                  class="wd200"
                  clearable
                  filterable
                  placeholder="Rh(D)"
                  size="mini"
                >
                  <el-option
                    v-for="(item, index) in bloodRhds"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="血量" prop="capacity">
                <el-input-number
                  v-model="form.capacity"
                  controls-position="right"
                  :min="0.5"
                  placeholder="血量"
                  size="mini"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="采血时间" prop="collect_time">
                <el-date-picker
                  v-model="form.collect_time"
                  align="center"
                  class="wd200"
                  placeholder="选择日期时间"
                  size="mini"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="失效时间" prop="invalid_time">
                <el-date-picker
                  v-model="form.invalid_time"
                  align="center"
                  class="wd200"
                  placeholder="选择日期时间"
                  size="mini"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请单号" prop="apply_num">
                <el-input
                  v-model.trim="form.apply_num"
                  clearable
                  placeholder="申请单号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="血源" prop="from">
                <el-select
                  v-model="form.from"
                  class="wd200 mr12"
                  clearable
                  filterable
                  placeholder="血源"
                >
                  <el-option
                    v-for="(item, index) in bloodSources"
                    :key="index"
                    :label="item.name"
                    :value="item.name_his"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submit('mainForm')">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </fieldset>
      <div class="h24"></div>
      <fieldset>
        <legend>血液信息</legend>
        <blood :blood="form" />
      </fieldset>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone, isNumeric } from '@/utils'
  import Blood from './Blood'
  import { getOne } from '@/api/blood'
  export default {
    components: {
      Blood,
    },
    data() {
      return {
        blood_id: '',
        activeName: 'first',
        dialogVisible: false,
        title: '血液修改',
        form: {},
        props: { label: 'name', value: 'id' },
        rules: {
          product_id_path: [
            { required: true, trigger: 'blur', message: '血液成分必须' },
          ],
          invalid_time: [
            { required: true, trigger: 'blur', message: '失效日期必须' },
          ],
        },
        bloodGroups: ['A', 'B', 'AB', 'O'],
        bloodRhds: ['阳性', '阴性'],
      }
    },
    computed: {
      ...mapGetters(['products', 'bloodSources']),
    },
    methods: {
      getSourceName() {
        if (isNumeric(this.form.from)) {
          return (
            (this.form.fromAttr && this.form.fromAttr.name_his) ||
            this.form.from
          )
        }
        return this.form.from
      },
      close() {
        this.form = {}
        this.dialogVisible = false
        this.activeName = 'first'
      },
      show(row) {
        this.form = deepClone(row)
        this.form.from = this.getSourceName()
        this.blood_id = row.id
        this.dialogVisible = true
      },
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$emit('submit', this.form.id, this.form)
          } else {
            return false
          }
        })
      },
      async getOne() {
        if (this.blood_id) {
          const { data } = await getOne(this.blood_id)
          this.form = data
        } else {
          this.form = {}
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
